<template>
  <div class="menulist">
    <div class="tablist">
      <div
        :class="['tabItem', { active: currentId == item.id }]"
        v-for="(item, index) of menuTab"
        :key="item.id"
        @click="changeId(item.id)"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="content">
      <div
        v-for="(item, index) of menuTabContent"
        v-show="currentId == item.parentId"
        :key="index"
        class="content-list"
      >
        <div
          v-for="(subitem, i) of item.list"
          :key="i"
          class="listone"
          :title="subitem.name"
        >
          <a :href="subitem.url" target="_blank">{{ subitem.name }}</a>
        </div>
        <div class="listone">
          <a href="" target="_blank" class="Add" @click="Additem">+</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getMenuTab } from "@/api/index.js";
onMounted(async () => {
  menuTabContent.value = await getMenuTab();
});

let menuTab = ref([
  {
    id: 0,
    title: "常用",
  },
  {
    id: 1,
    title: "程序员",
  },
  {
    id: 2,
    title: "设计",
  },
  {
    id: 3,
    title: "产品",
  },
  {
    id: 4,
    title: "摸鱼",
  },
]);
let menuTabContent = ref([]);
// 当前tab栏id
let currentId = ref(0);
const changeId = (id) => {
  currentId.value = id;
};

let Additem = (event) => {
  console.log("添加");
  // 清除默认事件
  event.preventDefault();
  return false;
};
</script>

<style lang="scss" scoped>
.menulist {
  box-shadow: 0 0 10px 3px #0000001a;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  width: 820px;
  overflow: hidden;
  padding: 0 10px;
  text-align: center;
  @media (max-width: 900px) {
    width: 500px;
  }
  @media (max-width: 740px) {
    width: 340px;
  }
  .tablist {
    display: flex;
    white-space: nowrap;
    width: 100%;
    .tabItem {
      color: rgba(0, 0, 0, 0.7);
      padding: 20px 0px;
      // 等分布局
      width: 100%;
      box-sizing: border-box;
      border-bottom: 1px solid transparent;
      font-family: YS;
      &.active {
        border-bottom: 1px solid white;
      }
      @media (max-width: 720px) {
        padding: 10px 0px;
      }
    }
  }
  .content {
    height: 450px;
    /* 隐藏滚动条 */
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow: auto;
    // 隐藏滚动条
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    @media (max-width: 900px) {
      height: 400px;
    }
    @media (max-width: 720px) and (max-height: 720px) {
      height: 320px;
    }
    .content-list {
      display: flex;
      flex-wrap: wrap;
      .listone {
        box-sizing: border-box;
        padding: 10px 10px;
        width: 160px;
        max-height: 60px;
        a {
          display: block;
          padding: 10px 10px;
          color: rgba(0, 0, 0, 0.7);
          background: rgba(255, 255, 255, 0.5);
          box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.102);
          border-radius: 10px;
          font-family: YS; //原神字体
          word-break: break-all;
          white-space: nowrap;
          overflow: hidden;
          // 溢出转换省略号
          text-overflow: ellipsis;
          // 将盒子转换成一个基于webkit的盒子
          // display: -webkit-box;
          // 盒子对象子元素的排列方式为垂直排列
          -webkit-box-orient: vertical;
          // 设置第几行转换小数点
          -webkit-line-clamp: 1;
        }
      }
    }
  }
}
</style>
